{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>陪护人员列表</title>
    <!-- Base Styling  -->
    <link rel="stylesheet" href="{% static 'css/fonts.css' %} ">
    <link rel="stylesheet" href="{% static 'css/style.css' %} ">
</head>

<body>
<div id="main-wrapper" class="show">


    <!-- start logo components -->
    <div class="nav-header">
        <div class="brand-logo">
            <a href="index.html"> <img class="logo-tabib" src="{% static 'picture/download.png' %}" alt=""></a>
            <a href="index.html"><img class="brand-title" src="{% static 'picture/logo.png' %}" alt=""></a>
        </div>
    </div>
    <!-- End logo components -->


    <!-- start section sidebar -->
    <aside class="left-panel nicescroll-box">
        <nav class="navigation">
            <ul class="list-unstyled main-menu">
                <li class="has-submenu active">
                    <a href="{% url 'index:index' %}">
                        <i class="fas fa-th-large"></i>
                        <span class="nav-label">首页</span>
                    </a>
                </li>
                <li class="has-submenu">
                    <a href="#" class="has-arrow mm-collapsed">
                        <i class="fas fa-user-md"></i>
                        <span class="nav-label">病员管理</span>
                    </a>
                    <ul class="list-unstyled mm-collapse">
                        <li><a href="add-doctor.html">添加病员</a></li>
                        <li><a href="{% url 'patients:list' %}">病员列表</a></li>
                    </ul>
                </li>
                <li class="has-submenu">
                    <a href="#" class="has-arrow mm-collapsed">
                        <i class="fas fa-users"></i>
                        <span class="nav-label">陪护管理</span>
                    </a>
                    <ul class="list-unstyled mm-collapse">
                        <li><a href="new-patient.html">陪护登记</a></li>
                        <li><a href="{% url 'caregiver:list' %}">通行记录管理</a></li>
                    </ul>
                </li>
                <li class="has-submenu">
                    <a href="{% url 'wards:ward_list' %}" class="has-arrow mm-collapsed">
                        <i class="fas fa-book-medical"></i>
                        <span class="nav-label">病区列表</span>
                    </a>
                </li>
                <li class="has-submenu">
                    <a href="log.html">
                        <i class="fas fa-calendar-alt"></i>
                        <span class="nav-label">日志</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="sidebar-widgets">
            <div class="top-sidebar box-shadow mx-25 m-b-30 p-b-20 text-center">
                <a href="new-appointment.html">
                    <img src="{% static 'picture/appointement.svg' %}" class="side-img" alt="img">
                </a>
            </div>
            <div class="copyright text-center">
                <p class="mb-0"> 疫情防控病区智能人脸识别通行系统 </p>

            </div>
        </div>
    </aside>
    <!-- End section sidebar -->


    <!-- start section header -->
    <div class="header">
        <header class="top-head container-fluid">
            <div class="nav-control">
                <div class="hamburger">
                    <span class="line"></span><span class="line"></span><span class="line"></span>
                </div>
                <div class="left-header content-header__menu">

                </div>
            </div>
            <div class="header-right">
                <div class="fullscreen notification_dropdown">
                    <div class="full">
                        <a class="text-dark" href="#!" onclick="javascript:toggleFullScreen()">
                            <i class="fas fa-expand"></i>
                        </a>
                    </div>
                </div>
                <div class="notification_dropdown">
                    <div class="cart-wrapper">
                        <div class="cart-icon">
                            <a class="cart-control" href="#">
                                <i class="fas fa-bell"></i>
                                <div class="pulse-css"></div>
                            </a>
                        </div>
                        <div class="cart-dropdown-form dropdown-container">
                            <div class="form-content">
                                <div class="widget-media main-scroll nicescroll-box">
                                    <ul class="timeline">
                                        <li>
                                            <h6 class="mb-0">Notitications</h6>
                                        </li>
                                        <li>
                                            <div class="timeline-panel">
                                                <div class="media mr-2">
                                                    <img alt="image" src="{% static 'picture/1.jpg' %}">
                                                </div>
                                                <div class="media-body">
                                                    <h6 class="mb-1 ">Incoming Message</h6>
                                                    <small class="d-block">29 July 2020 - 02:26 PM</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-panel">
                                                <div class="media mr-2 media-info">
                                                    <!-- KG -->
                                                    <img alt="image" src="{% static 'picture/1.jpg' %}">
                                                </div>
                                                <div class="media-body">
                                                    <h6 class="mb-1">You got a new email</h6>
                                                    <small class="d-block">29 July 2020 - 02:26 PM</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-panel">
                                                <div class="media mr-2 media-success">
                                                    <img alt="image" src="{% static 'picture/1.jpg' %}">
                                                </div>
                                                <div class="media-body">
                                                    <h6 class="mb-1">Hello world!</h6>
                                                    <small class="d-block">29 July 2020 - 02:26 PM</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-panel">
                                                <div class="media mr-2">
                                                    <img alt="image" src="{% static 'picture/1.jpg' %}">
                                                </div>
                                                <div class="media-body">
                                                    <h6 class="mb-1">Beep Boop. Beee...</h6>
                                                    <small class="d-block">29 July 2020 - 02:26 PM</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-panel">
                                                <div class="media mr-2 media-danger">
                                                    <!-- KG -->
                                                    <img alt="image" src="{% static 'picture/1.jpg' %}">
                                                </div>
                                                <div class="media-body">
                                                    <h6 class="mb-1">Hello world!</h6>
                                                    <small class="d-block">29 July 2020 - 02:26 PM</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="timeline-panel">
                                                <div class="media mr-2 media-primary">
                                                    <img alt="image" src="{% static 'picture/1.jpg' %}">
                                                </div>
                                                <div class="media-body">
                                                    <h6 class="mb-1">Incoming Message</h6>
                                                    <small class="d-block">29 July 2020 - 02:26 PM</small>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <a class="all-notification btn btn-primary" href="#">
                                    See all notifications
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="my-account-wrapper">
                    <div class="account-wrapper">
                        <div class="account-control">
                            <a class="login header-profile" href="#" title="Sign in">
                                <div class="header-info">
                                    <span>Dr Roberts</span>
                                    <small>Admin</small>
                                </div>
                                <img src="{% static 'picture/client.jpg' %}" alt="people">
                            </a>
                            <div class="account-dropdown-form dropdown-container">
                                <div class="form-content">
                                    <a href="doctor-settings.html">
                                        <i class="far fa-user"></i>
                                        <span class="ml-2">Profile</span>
                                    </a>
                                    <a href="#">
                                        <i class="far fa-envelope"></i>
                                        <span class="ml-2">Inbox</span>
                                    </a>
                                    <a href="page-login.html">
                                        <i class="fas fa-sign-in-alt"></i>
                                        <span class="ml-2">Logout </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
    <!-- End section header -->


    <!-- start section content -->
    <div class="content-body">
        <div class="warper container-fluid">
            <div class="all-patients main_container">
                <div class="row page-titles mx-0">
                    <div class="col-sm-6 p-md-0">
                        <div class="welcome-text">
                            <h4 class="text-primary">陪护人员管理</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header fix-card">
                                <div class="row">
                                    <div class="col-8">
                                        <h4 class="card-title"> 陪护人员列表 </h4>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="example2" class="display nowrap">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>名字</th>
                                            <th>身份证号</th>
                                            <th>出生日期</th>
                                            <th>性别</th>
                                            <th>电话号码</th>
                                            <th>陪护开始时间</th>
                                            <th>陪护结束时间</th>
                                            <th>地区风险等级</th>
                                            <th>流调信息</th>
                                            <th>疫苗接种情况</th>
                                            <th>入院体温</th>
                                            <th>核酸结果</th>
                                            <th>通行照片</th>
                                            <th>陪护状态</th>
                                            <th>所属病人</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for o in data %}
                                            <tr>
                                                <td>{{ o.id }}</td>
                                                <td>{{ o.name }}</td>
                                                <td>{{ o.IDCard }}</td>
                                                <td>{{ o.birth }}</td>
                                                <td>{{ o.gender }}</td>
                                                <td>{{ o.phone }}</td>
                                                <td>{{ o.start_time }}</td>
                                                <td>{{ o.end_time }}</td>
                                                <td>{{ o.risk_level }}</td>
                                                <td>{{ o.trip }}</td>
                                                <td>{{ o.survey }}</td>
                                                <td>{{ o.temperature }}</td>
                                                <td>{{ o.nuclein }}</td>
                                                <td>{{ o.face_img }}</td>
                                                <td>{{ o.state }}</td>
                                                <td>{{ o.patient_id }}</td>
                                                <td>
                                                    {#                                                    <a class='mr-4 vue'>#}
                                                    {#                                                        <span class='fa fa-eye' aria-hidden='true'></span>#}
                                                    {#                                                    </a>#}
                                                    <a data-bs-toggle='modal' data-bs-target='#modal-edit' class='mr-4'>
                                                        <span class='fas fa-pencil-alt'></span>
                                                    </a>
                                                    <a class='mr-4 delet'>
                                                        <span class='fas fa-trash-alt'></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        {% endfor %}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                    </button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End section content -->

</div>


<!-- Show data patient -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <!-- <div > -->
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel"><img class="rounded-circle" width="35"
                                                               src="{% static 'picture/user1.jpg' %}" alt=""> Tiger
                    Nixon </h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="insertHere"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- End Show data patient -->


<!-- Modal -->
<div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="modal-title-edit-row" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title-edit-row">Angelica Ramos</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="basic-form">
                            <form>
                                <div class="row">
                                    <div class="col-xl-4">
                                        <div class="form-group row widget-3">
                                            <div class="col-lg-12">
                                                <div class="form-input">
                                                    <label class="labeltest" for="file-ip-1">
                                                        <span> Drop image here or click to upload. </span>
                                                    </label>
                                                    <input type="file" id="file-ip-1" accept="image/*"
                                                           onchange="showPreview(event);">
                                                    <div class="preview">
                                                        <img id="file-ip-1-preview"
                                                             src="https://www.17sucai.com/preview/776298/2021-08-30/tabib/all-patients.html"
                                                             alt="img">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-4">
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <input type="text" class="form-control" placeholder="First Name">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <input type="text" class="form-control" placeholder="Last name">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <input type="email" class="form-control" placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <input type="text" class="form-control" placeholder="Mobile No.">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-4">
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="Birthday">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <select class="form-control form-select">
                                                    <option> Marital status</option>
                                                    <option>Married</option>
                                                    <option>Unmarried</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <select class="form-control form-select">
                                                    <option>Sex</option>
                                                    <option>Male</option>
                                                    <option>Female</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <select class="form-control form-select">
                                                    <option>Blood Group</option>
                                                    <option>A+</option>
                                                    <option>A-</option>
                                                    <option>B+</option>
                                                    <option>B-</option>
                                                    <option>O+</option>
                                                    <option>O-</option>
                                                    <option>AB+</option>
                                                    <option>AB-</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-4"></div>
                                    <div class="col-xl-4">
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <input type="text" class="form-control" placeholder="Patient Weight">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-4">
                                        <div class="form-group row">
                                            <div class="col-lg-12">
                                                <input type="text" class="form-control" placeholder="Patient Height">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-4">
                                        <div class="form-group">
                                            <div class="col-lg-12">
                                            </div>
                                            <textarea class="form-control" placeholder="Address" rows="4"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-xl-8">
                                        <div class="form-group">
                                            <textarea class="form-control" placeholder="Patient History"
                                                      rows="4"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!--End Modal -->


<!-- JQuery v3.5.1 -->
<script src="{% static 'js/jquery.min.js' %}"></script>

<!-- popper js -->
<script src="{% static 'js/popper.min.js' %}"></script>

<!-- Bootstrap -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- Moment -->
<script src="{% static 'js/moment.min.js' %}"></script>

<!-- Date Range Picker -->
<script src="{% static 'js/daterangepicker.min.js' %}"></script>

<!-- Datatable -->
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'js/init-tdatatable.js' %}"></script>

<!-- Main Custom JQuery -->
<script src="{% static 'js/toggleFullScreen.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

</body>

</html>